&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;山羊の前端小窝&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://static.fontawesome.com/css/fontawesome-app.css&quot;&gt;
    &lt;!-- 引入字体图标 --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./font/iconfont.css&quot;&gt;
    &lt;!-- 引入字体 --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400&amp;display=swap&quot;&gt;
    &lt;style&gt;
        * {
            padding: 0;
            margin: 0;
            font-family: &quot;Source Sans Pro&quot;, sans-serif;
        }

        html,
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-size: cover;
            overflow: hidden;
            transition: background-image .7s ease-in-out;
        }

        .shell {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background: rgba(99, 99, 99, 0.8);
        }

        .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 380px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -80px;
        }

        .prev,
        .next {
            transition: transform 0.25s ease;
            z-index: 99999;
            bottom: 5px;
        }

        .prev i,
        .next i {
            font-size: 90px;
            color: #fff;
            cursor: pointer;
            text-shadow: 0 0 10px #ffffff;
        }

        .shell_body {
            width: 100%;
            transform: scale(.8);
            padding: 20px 0 150px 0;
        }

        .shell_slider {
            position: relative;
            transition: transform 1s ease-in-out;
            background: transparent;
        }

        .item {
            position: relative;
            float: left;
            margin: 0 20px;
        }

        .frame {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 1s ease-in-out;
            transform-style: preserve-3d;
        }

        .frame:after {
            content: &quot;&quot;;
            position: absolute;
            bottom: -16%;
            width: 100%;
            height: 60px;
            background: #ffffff1c;
            box-shadow: 0px 0px 15px 5px #ffffff1c;
            transform: rotateX(90deg) translate3d(0px, -20px, 0px);
        }

        .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            height: 100%;
            border: 4px solid #fff;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .box h1,
        .box span {
            color: #fff;
            transform: translateZ(20px);
        }

        .box h1 {
            text-shadow: 0 0 30px #1f05b4;
            font-size: 100px;
        }

        .box span {
            position: absolute;
            bottom: 20px;
            padding: 0 25px;
            text-shadow: 0 0 10px #1f05b4;
        }

        .front,
        .left,
        .right {
            box-shadow: 0 0 50px #ffffff;
            background-size: cover;
        }

        .right,
        .left {
            top: 0;
            width: 60px;
            backface-visibility: hidden;
        }

        .left {
            left: 0;
            border-left-width: 5px;
            transform: translate3d(1px, 0, -60px) rotateY(-90deg);
            transform-origin: 0%;
        }

        .right {
            right: 0;
            border-right-width: 5px;
            transform: translate3d(-1px, 0, -60px) rotateY(90deg);
            transform-origin: 100%;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;shell&quot;&gt;
        &lt;div class=&quot;shell_body&quot;&gt;
            &lt;div class=&quot;button&quot;&gt;
                &lt;div class=&quot;prev&quot;&gt;&lt;i class=&quot;iconfont icon-backward_filled&quot;&gt;&lt;/i&gt;&lt;/div&gt;
                &lt;div class=&quot;next&quot;&gt;&lt;i class=&quot;iconfont icon-forward_filled&quot;&gt;&lt;/i&gt;&lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;shell_slider&quot;&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2014&lt;/h1&gt;
                            &lt;span&gt;-In the year 2014 I reached the age of 13-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2015&lt;/h1&gt;
                            &lt;span&gt;-In the year 2015 I reached the age of 14-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2016&lt;/h1&gt;
                            &lt;span&gt;-In the year 2016 I reached the age of 15-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2017&lt;/h1&gt;
                            &lt;span&gt;-In the year 2017 I reached the age of 16-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2018&lt;/h1&gt;
                            &lt;span&gt;-In the year 2018 I reached the age of 17-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2019&lt;/h1&gt;
                            &lt;span&gt;-In the year 2019 I reached the age of 18-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2020&lt;/h1&gt;
                            &lt;span&gt;-In the year 2020 I reached the age of 18-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2021&lt;/h1&gt;
                            &lt;span&gt;-In the year 2021 I reached the age of 19-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2022&lt;/h1&gt;
                            &lt;span&gt;-In the year 2022 I reached the age of 20-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;item&quot;&gt;
                    &lt;div class=&quot;frame&quot;&gt;
                        &lt;div class=&quot;box front&quot;&gt;
                            &lt;h1&gt;2023&lt;/h1&gt;
                            &lt;span&gt;-In the year 2023 I reached the age of 21-&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;box left&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;box right&quot;&gt; &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
    // 获取所有的item元素
    var items = document.getElementsByClassName(&#39;item&#39;);
    // 循环遍历每个item
    for (var i = 0; i &lt; items.length; i++) {
        // 获取当前item
        var item = items[i];
        var frame = item.getElementsByClassName(&#39;frame&#39;)[0];
        var frontBox = frame.getElementsByClassName(&#39;front&#39;)[0];
        var leftBox = frame.getElementsByClassName(&#39;left&#39;)[0];
        var rightBox = frame.getElementsByClassName(&#39;right&#39;)[0];
        // 设置背景图片
        frontBox.style.backgroundImage = &#39;url(./img/&#39; + (i + 1).toString().padStart(2, &#39;0&#39;) + &#39;.jpg)&#39;;
        leftBox.style.backgroundImage = &#39;url(./img/&#39; + (i + 1).toString().padStart(2, &#39;0&#39;) + &#39;.jpg)&#39;;
        rightBox.style.backgroundImage = &#39;url(./img/&#39; + (i + 1).toString().padStart(2, &#39;0&#39;) + &#39;.jpg)&#39;;
    }
    (function () {
        &quot;use strict&quot;;
        var shell = document.getElementsByClassName(&#39;shell&#39;)[0];
        var slider = shell.getElementsByClassName(&#39;shell_slider&#39;)[0];
        var items = shell.getElementsByClassName(&#39;item&#39;);
        var prevBtn = shell.getElementsByClassName(&#39;prev&#39;)[0];
        var nextBtn = shell.getElementsByClassName(&#39;next&#39;)[0];
        // 定义变量
        var width, height, totalWidth, margin = 20,
            currIndex = 0,
            interval, intervalTime = 3000;
        function init() {
            // 初始化函数
            resize();
            move(Math.floor(items.length / 2));
            bindEvents();
            timer();
        }
        function resize() {
            // 窗口大小变化时调整大小
            width = Math.max(window.innerWidth * .20, 275);
            height = window.innerHeight * .5;
            totalWidth = width * items.length;
            // 设置slider宽度
            slider.style.width = totalWidth + &quot;px&quot;;
            // 设置每个item的宽度和高度
            for (var i = 0; i &lt; items.length; i++) {
                let item = items[i];
                item.style.width = (width - (margin * 2)) + &quot;px&quot;;
                item.style.height = height + &quot;px&quot;;
            }
        }
        function bindEvents() {
            // 窗口大小变化时调整大小
            window.onresize = resize;
            // 点击prev按钮切换item
            prevBtn.addEventListener(&#39;click&#39;, () =&gt; { prev(); });
            nextBtn.addEventListener(&#39;click&#39;, () =&gt; { next(); });
        }
        init();
        function move(index) {
            // 移动shell到指定的item
            if (index &lt; 1) index = items.length;
            if (index &gt; items.length) index = 1;
            currIndex = index;
            // 遍历所有item
            for (var i = 0; i &lt; items.length; i++) {
                let item = items[i],
                    box = item.getElementsByClassName(&#39;frame&#39;)[0];
                if (i == (index - 1)) {
                    // 当前item添加active类并设置3D效果
                    item.classList.add(&#39;item--active&#39;);
                    box.style.transform = &quot;perspective(1200px)&quot;;
                } else {
                    // 其他item移除active类并设置3D效果
                    item.classList.remove(&#39;item--active&#39;);
                    box.style.transform = &quot;perspective(1200px) rotateY(&quot; + (i &lt; (index - 1) ? 40 : -40) + &quot;deg)&quot;;
                }
            }
            // 移动slider
            slider.style.transform = &quot;translate3d(&quot; + ((index * -width) + (width / 2) + window.innerWidth / 2) + &quot;px, 0, 0)&quot;;
            // 设置body背景图片
            var frontBox = items[index - 1].getElementsByClassName(&#39;front&#39;)[0];
            document.body.style.backgroundImage = frontBox.style.backgroundImage;
        }
        function timer() {
            // 定时器，自动切换shell
            clearInterval(interval);
            interval = setInterval(() =&gt; {
                move(++currIndex);
            }, intervalTime);
        }
        // 切换item
        function prev() {
            move(--currIndex);
            timer();
        }
        function next() {
            move(++currIndex);
            timer();
        }
    })();
&lt;/script&gt;

&lt;/html&gt;